<template>
 
    



<el-container>
    

  <el-main>
    <el-form 
        :label-position="labelPosition" 
        label-width="100px" 
        :model="formLabelAlign">

        <el-form-item label="修改用户名">
          <el-input v-model="formLabelAlign.name" placeholder="请输入新用户名"> </el-input>
          <el-button type="primary" size="mini" @click="submitName">保存</el-button>
        </el-form-item>
        <el-form-item label="修改密码">
          <el-input v-model="formLabelAlign.oldPwd"  placeholder="请输入旧密码"> </el-input>
          <el-input v-model="formLabelAlign.pwd"  placeholder="请输入新密码"> </el-input>
          <el-button type="primary" size="mini" @click="submitPwd">保存</el-button>
        </el-form-item>
          <el-form-item label="修改手机号码">
          <el-input v-model="formLabelAlign.phone"  placeholder="请输入新手机号码"> </el-input>
          <el-button type="primary" size="mini" @click="submitPhone">保存</el-button>
        </el-form-item>
          <el-form-item label="修改电子邮箱">
          <el-input v-model="formLabelAlign.email"  placeholder="请输入新电子邮箱"> </el-input>
          <el-button type="primary" size="mini" @click="submitEmail">保存</el-button>
        </el-form-item>
    </el-form>
  </el-main>
    <el-button type="primary" size="mini" @click="home">回到主页</el-button>

</el-container>



 


</template>



<script>
  export default {
    data() {
      return {
        labelPosition: 'left',
        formLabelAlign: {
          name: '',
          oldPwd: '',
          pwd: '',
          phone: '',
          email: ''
        }
      };
    },


    methods: {

    //修改用户名的方法
    submitName() { 
      var userPattern = /^[a-zA-Z0-9_-]{4,16}$/;//用户名格式判断     4到16位（字母，数字，下划线，减号）
      if (this.formLabelAlign.name.trim() == "" || !userPattern.test(this.formLabelAlign.name)) {
          this.$message.error('请输入正确的用户名 长度为4到16位');
          return;
      } 

      this.$api.checkRegister(this.formLabelAlign.name,1)
      .then(res =>{
            console.log(res.data);
            if (res.data.status == 500) {
                this.$message.error("数据已存在");
                return;
            }
            alert("您即将进行更新操作，用户id是"+localStorage.getItem("userid")),
            this.$api.userInfoUpdate(this.formLabelAlign.name,localStorage.getItem("userid"),1)
            .then(res => {
                      if (res.data.data === 1) {
                        alert(this.formLabelAlign.name);
                        localStorage.setItem("username",this.formLabelAlign.name );
                        alert("修改成功");  
                      
                      }else{
                        alert(res.data.msg);
                      }
            })
        })
          
    
    },





    //修改用户密码的方法
    submitPwd() {
      var pwdPattern = /^[a-zA-Z0-9_-]{6,20}$/; //密码强度正则，6到20位（字母，数字，下划线，减号）
      if (this.formLabelAlign.pwd.trim() == "" || !pwdPattern.test(this.formLabelAlign.pwd)) {
          this.$message.error('请输入正确的密码 长度为4到20位');
          return;
      } 
      alert("您即将进行更新操作，用户id是"+localStorage.getItem("userid")),
       this.$api.userInfoUpdatePwd(this.formLabelAlign.pwd,localStorage.getItem("userid"),2,this.formLabelAlign.oldPwd)
      .then(res => {
                if (res.data.data === 1) {
                  alert("修改成功");  
                }else{
                  alert(res.data.msg);
                }
            })
    },

    //修改用户电话的方法
    submitPhone() {
      var telPattern =/^1[3456789]\d{9}$/;
      if (this.formLabelAlign.phone.trim() == "" || !telPattern.test(this.formLabelAlign.phone)) {
              this.$message.error('请输入正确的电话号码');
              return;
      } 
      alert("您即将进行更新操作，用户id是"+localStorage.getItem("userid")),
       this.$api.userInfoUpdate(this.formLabelAlign.phone,localStorage.getItem("userid"),3)
      .then(res => {
                if (res.data.data === 1) {
                  localStorage.setItem("phone",this.formLabelAlign.phone);
                  alert("修改成功");  
                }else{
                  alert(res.data.msg);
                }
            })
    },

    //修改电子邮件的方法
    submitEmail() {
      var ePattern =/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      if (this.formLabelAlign.email.trim() == "" || !ePattern.test(this.formLabelAlign.email)) {
            this.$message.error('请输入正确的电子邮箱');
            return;
      } 
      alert("您即将进行更新操作，用户id是"+localStorage.getItem("userid")),
       this.$api.userInfoUpdate(this.formLabelAlign.email,localStorage.getItem("userid"),4)
      .then(res => {
                if (res.data.data === 1) {
                  localStorage.setItem("email",this.formLabelAlign.email);
                  alert("修改成功");  
                }else{
                  alert(res.data.msg);
                }
            })
    },

    home(){
       this.$router.push({ path:"/" }) 
    },

    re(){
      alert(sdfaf);
    }
  }

}
</script>


<style scoped>

.el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    font-size:20px;
    
    line-height: 60px;
    
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
</style>